<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/img/ai-avatar.svg" type="image/x-icon">
    <title>在线AI聊天</title>
    <script src="/js/animationLoader.js"></script>
    <link rel="stylesheet" href="/css/style.css?v=0.0.1">
    <link rel="stylesheet" href="/css/markdown-theme/orangeheart.css?v=0.0.2">
    <link href="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.2/css/mdui.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.8.0/styles/atom-one-light.min.css" rel="stylesheet">
</head>

<body class="mdui-drawer-body-left mdui-appbar-with-toolbar">

    <!-- 顶部导航栏 -->
    <header class="mdui-appbar mdui-appbar-fixed mdui-color-theme mdui-text-color-black-text">
        <div class="mdui-toolbar">
            <!-- 切换侧边栏状态 -->
            <a id="toggleDrawer" class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple">
                <i class="mdui-icon material-icons">menu</i>
            </a>
            <span class="mdui-typo-title">
                chat1
            </span>
            <div class="mdui-toolbar-spacer"></div>
            <a class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple" mdui-tooltip="{content: '当前Chat设置'}">
                <i class="mdui-icon material-icons">settings</i>
            </a>
            <a onclick="window.location.reload()" mdui-tooltip="{content: '刷新页面'}"
                class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple">
                <i class="mdui-icon material-icons">refresh</i>
            </a>
        </div>
    </header>

    <div class="mdui-drawer" id="chat-list">
        <ul class="mdui-list">
            <li class="mdui-list-item mdui-ripple new">
                <i class="mdui-list-item-icon mdui-icon material-icons">playlist_add</i>
                <div class="mdui-list-item-content">NEW Chat</div>
            </li>

            <li class="mdui-divider"></li>

            <div class="list"></div>
        </ul>
    </div>

    <div id="container">
        <main id="output" class="markdown-body">
        </main>

        <footer class="mdui-typo">
            <div class="progress-container" style="display: none;">
                <div class="mdui-progress">
                    <div class="mdui-progress-indeterminate"></div>
                </div>
            </div>
            <div class="mdui-textfield">
                <textarea id="input" rows="4" class="mdui-textfield-input"
                    placeholder="你有什么想说的吗？（回车换行， Ctrl + Enter 发送请求）" maxlength="4000"></textarea>
            </div>
            <div class="button-container">
                <div class="mdui-float-left" style="padding-left: 10px;">
                    <button class="mdui-btn mdui-btn-dense mdui-btn-raised mdui-ripple mdui-color-theme"
                        mdui-dialog="{target: '#dialog-docs-theme'}">
                        <i class="mdui-icon material-icons">color_lens</i>
                        设置主题
                    </button>
                </div>

                <div class="mdui-float-right" style="padding-right: 10px;">
                    <button id="msg-send" onclick="main($('footer textarea').val().trim())"
                        mdui-tooltip="{content: '发送'}"
                        class="mdui-btn mdui-btn-dense mdui-btn-raised mdui-ripple mdui-color-theme">
                        <i class="mdui-icon material-icons">send</i>
                    </button>
                </div>
            </div>
        </footer>
    </div>

    <div id="progress-overlay">
        <div class="mdui-dialog mdui-dialog-open" id="progress">
            <div class="mdui-p-x-2">
                <p class="mdui-text-center">加载资源中……</p>
                <div class="mdui-progress">
                    <div class="mdui-progress-indeterminate"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 调色板 -->
    <div class="mdui-dialog" id="dialog-docs-theme">
        <div class="mdui-dialog-title">设置文档主题</div>
        <div class="mdui-dialog-content">
            <p class="mdui-typo-title">主题色</p>
            <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
                <div class="mdui-col">
                    <label class="mdui-radio mdui-m-b-1">
                        <input type="radio" name="doc-theme-layout" value="" checked />
                        <i class="mdui-radio-icon"></i>
                        Light
                    </label>
                </div>
                <div class="mdui-col">
                    <label class="mdui-radio mdui-m-b-1">
                        <input type="radio" name="doc-theme-layout" value="auto" checked />
                        <i class="mdui-radio-icon"></i>
                        Auto
                    </label>
                </div>
                <div class="mdui-col">
                    <label class="mdui-radio mdui-m-b-1">
                        <input type="radio" name="doc-theme-layout" value="dark" />
                        <i class="mdui-radio-icon"></i>
                        Dark
                    </label>
                </div>
            </div>
        </div>
        <div class="mdui-divider"></div>
        <div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-float-left" mdui-dialog-cancel>
                <i class="mdui-icon material-icons">cancel</i>恢复默认主题
            </button>
            <button class="mdui-btn mdui-btn-raised mdui-ripple" mdui-dialog-confirm>
                <i class="mdui-icon material-icons">done_all</i>ok
            </button>
        </div>
    </div>

    <!-- 
    -----
    外部库
    -----
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.2/js/mdui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/9.0.0/marked.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
    <script
        src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
    <!-- 
    -------
    自有功能
    -------
    -->
    <script src="/js/sendRequest.js?v=0.0.2"></script>
    <script src="/js/keydown.js?v=0.0.2"></script>
    <script src="/js/parse.js?v=0.0.2"></script>
    <script src="/js/colorPalette.js"></script>
    <script src="/js/main.js?v=0.2.2"></script>
    <script src="/js/chatData.js?v=1.0.0"></script>

    <script>
        // 初始化MDUI未初始化的组件
        mdui.mutation();

        let inst = new mdui.Drawer('#chat-list', {
            swipe: true
        });

        $('.mdui-toolbar #toggleDrawer').on('click', function () {
            inst.toggle();
        });
        
        $.get("https://raw.githubusercontent.com/dfggmc/AiChat/main/README.md", function (data) {
            const parsedMarkdown = marked.parse(data);
            $("#output").html(`${parsedMarkdown}`);
        }).fail(function () {
            console.log("Error: Cannot retrieve content.");
        });
    </script>
</body>

</html>